<template>
	<view>
		<view></view>
		<view class="btn" @click="onLogin(user)" v-for="(user,index) in mvps" style="margin: 15px 0;background-color: white;z-index: 22;position: relative;">
			<view style="flex-direction: column;display: flex;margin:5px 5px;">
				<!-- 人员名片 -->
				<view style="margin: 0px 0;padding: 0px 0px;" > 
					<view style="display: flex;justify-content: flex-start;align-items: flex-start;">
						<view style="flex:1;font-size: 14px;display: flex;justify-content: flex-start;align-items: flex-start;">
							<view style="margin: 0px 10px;padding:0px;">
								<u-avatar shape="square" size="40" :src="absUrl(user.head_icon_url)"></u-avatar>
							</view>
							
							<view style="display: flex;flex-direction: column;flex:1;">
								<text style="font-size: 16px;color:#00007f">{{user.nickname}}</text>
								<view style="flex:1;padding: 5px 10px 0 0">
									<text style="font-size: 16px;">
										今天的天气非常好,难得出来逛逛街。今天的天气非常好,难得出来逛逛街。今天的天气非常好,难得出来逛逛街。今天的天气非常好,难得出来逛逛街。
									</text>
								</view>
								
								<!-- 图片组 -->
								<view style="display: flex;flex-wrap: wrap;margin-top: 10px;">
									<view v-if="messages[index % 3].content.pics.length==1">
										<view style="padding: 2px;">
											<u-image :width="messages[index % 3].thumb_size.width" :height="messages[index % 3].thumb_size.height" :src="absUrl(messages[index % 3].content.pics[0])
												
											"></u-image>
										</view>
									</view>
									
									<view v-else-if="messages[index % 3].content.pics.length==4" v-for="(message,index2) in messages[index % 3].content.pics">
										<view style="padding: 2px;">
											<u-image width="120px" height="120px" :src="absUrl('/static/h.jpg')
												
											"></u-image>
										</view>
									</view>
									
									<view v-else v-for="(message,index2) in messages[index % 3].content.pics">
										<view style="padding: 2px;">
											<u-image width="95px" height="95px" :src="absUrl('/static/h.jpg')
												
											"></u-image>
										</view>
									</view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed:{
			sex(){
				return (val) => {
					return val == 1? '男' : '女'
				}
			},
			roleName(){
				return (str)=>{
					let arr = JSON.parse(str);
					
					if(arr.length == 0)
					{
						return '普通用户'
					}else if(arr.includes('super-admin'))
					{
						return '代理'
					}else if(arr.includes('admin'))
					{
						return '发布者'
					}else if(arr.includes('publisher'))
					{
						return '管理员'
					}else if(arr.includes('agent'))
					{
						return '超级管理员'
					}else {
						return '普通用户'
					}
				}
			}
		},
		data() {
			return {
				loading:true,
				mvps:[],
				records:[],
				message:{
					content:{
						src:'/static/error.png',
					},
				},
				messages:[
					{
						type:'img',
						content:{
							pics:[
								'/static/h.jpg',
								'/static/h.jpg',
								'/static/h.jpg',
								'/static/h.jpg',
								'/static/h.jpg',
								'/static/h.jpg',
							]
						}
					},
					{
						type:'img',
						content:{
							pics:[
								'/static/error.png'
							]
						}
					},
					{
						type:'img',
						content:{
							pics:[
								'/static/h.jpg',
								'/static/h.jpg',
								'/static/h.jpg',
								'/static/h.jpg'
							]
						}
					},
				]
			}
		},
		async onShow(){
			this.messages.forEach(async (message)=>{
				if(message.content.pics.length == 1)
				{
					message.thumb_size = await this.regularSize(message.content.pics[0],250,230)
					console.log(message.thumb_size)
				}
			})
			
			let res = await this.$http.get('/common/user/list')
			
			this.mvps = res.data
		},
		methods: {
			async ensureSizeInfo(src)
			{
				console.log(this.absUrl(src))
				let imgInfo = await uni.getImageInfo({
					src: this.absUrl(src)
				})
				
				let size = {width:imgInfo.width,height:imgInfo.height}
				
				return size
			},
			async regularSize(src,maxWidth=200,maxHeight=150)
			{
					let size = {width:200,height:200}
					
					try{
						size = await this.ensureSizeInfo(src)
					}catch(e){
						//TODO handle the exception
						console.log('can not retrive size.' + e)
					}
				
					
					// let length = Math.max(message.size.width,message.size.height)
					// let scale = Math.min(maxWidth / length,1.0)
					
					let widthScale = Math.min(maxWidth / size.width,1.0)
					let heightScale = Math.min(maxHeight / size.height,1.0)
					let scale = Math.min(widthScale,heightScale,1.0)
					
					// let length = Math.max(message.size.width,message.size.height)
					// let scale = Math.min(maxLength / length,1.0)
					
					let width = Math.floor(size.width * scale)
					let height = Math.floor(size.height * scale)
					
					width = Math.max(width,30)
					height = Math.max(height,30)
					 
					console.log(width)
					console.log(height)
			
					return {width,height}
			},
			// async regularSize(message){
			// 	message.thumb_size = await this._regularSize(message)
			// }
		}
	}
</script>

<style>

</style>
